<template>
	<view class="moment_container">
		<view class="moment_list_card">
			<!-- 左侧头像 -->
			<view class="useravater" @click="goToMySpace(item.customerNo)">
				<image :src="item.avatar ||  defaultAvatar" mode=""></image>
			</view>
			<!-- 右侧内容区域 -->
			<view class="content">
				<!-- 昵称 -->
				<text class="username">{{item.nickname}}</text>
				<!-- 内容 -->
				<text v-if="item.opinion" class="usertext">{{item.opinion}}</text>
				<!-- 图片 -->
				<view v-if="mediasCompute.length >= 1" class="userimg">
					<block v-for="image in mediasCompute">
						<!-- 单图 -->
						<image v-if="mediasCompute.length === 1" :src="image" @click="preview(image)" @load="loadImage"
							:style="imageStyle"></image>
						<!-- 多图 -->
						<image v-else :src="image" mode="aspectFill"
							style="height: 170rpx;width: 170rpx;margin: 0 20rpx 20rpx 0;" @click="preview(image)">
						</image>
					</block>
				</view>
				<!-- 视频 -->
				<view v-if="item.mediaType == 2" class="uservideo">
					<video :src="item.video.src" :poster="item.video.poster" controls
						style="height: 300rpx;width: 500rpx;" loop></video>
				</view>
				<!-- 时间 操作 -->
				<view class="time_operation">
					<text class="time">{{item.createTime}}</text>
					<view class="operation" @click="$emit('action')">
						<u-icon name="more-dot-fill" color="#0056b3"></u-icon>
					</view>
				</view>
				<!-- 点赞||评论列表 -->
				<view v-if="item.likes || item.comments">
					<!-- 点赞 -->
					<view v-if="item.likes" class="userlike">
						<u-icon name="heart" color="red" size="20"></u-icon>
						<view class="like_name">
							<text v-for="(like,index) in item.likes" :key="index" class="name_text">{{like.name}}</text>
						</view>
					</view>
					<!-- 评论 -->
					<view class="comment" v-if="item.comments">
						<u-icon name="chat" color="#0056b3" size="20"></u-icon>
						<view class="">
							<view class="comment_text" v-for="(comment,index) in item.comments" :key="index">
								<text style="color: #0056b3;">{{comment.username}}:</text>
								<text class="comment_content">{{comment.content}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'BsinMomentList',
		props: {
			item: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {
				defaultAvatar: 'https://ipfs.s11edao.com/ipfs/QmQKqCed4mH1fRdNRXdxiDFnfwihWCPqc53JLxuWPQ3iq6',
				h: undefined,
				w: undefined
			}
		},
		computed: {
			imageStyle() {
				return `width:${this.w}px;height:${this.h}px;`
			},
			mediasCompute() {
				var mediasArr = this.item.medias.split(",");
				if(mediasArr[0] == ''){
					return mediasArr = []
				}
				return mediasArr;
			}
		},
		methods: {
			// 图片加载执行
			loadImage(e) {
				let maxW = 500,
					maxH = 350
				let w = e.detail.width
				let h = e.detail.height
				// 最大值
				maxW = uni.upx2px(maxW)
				maxH = uni.upx2px(maxH)
				if (h <= maxH) {
					// 用原来的宽高
					this.w = w <= maxW ? w : maxW
					this.h = h
					this.$emit('load', {
						w: this.w,
						h: this.h
					})
					return;
				}
				this.h = maxH
				let w2 = maxH * (w / h)
				this.w = w2 <= maxW ? w2 : maxW
				this.$emit('load', {
					w: this.w,
					h: this.h
				})
			},

			// 跳转个人主页
			goToMySpace(customerNo) {
				uni.navigateTo({
					url: `/pages/My/MySpace?customerNo=${customerNo}`
				})
			},

			// 预览图片
			preview(src) {
				uni.previewImage({
					current: src,
					urls: this.mediasCompute
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.moment_container {
		padding: 16rpx 24rpx;
		border-bottom: 2rpx solid #E9E8E5;

		.moment_list_card {
			display: flex;

			// 左侧头像
			.useravater {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// 右侧内容区域
			.content {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-left: 20rpx;

				.username {
					color: #0056b3;
					margin-bottom: 10rpx;
				}

				.usertext {
					margin-bottom: 10rpx;
				}

				.userimg {
					display: flex;
					flex-wrap: wrap;
					padding: 20rpx 0;
				}

				.uservideo {
					padding: 20rpx 0;
				}

				// 时间操作
				.time_operation {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.time {
						color: #A9A5A0;
					}

					.operation {
						background-color: #f8f9fa;
						padding: 10rpx;
					}
				}

				// 点赞
				.userlike {
					display: flex;
					align-items: flex-start;
					margin-top: 20rpx;
					padding: 20rpx;
					background-color: #f8f9fa;
					border-bottom: 1rpx solid #dee2e6;

					.like_name {
						display: flex;
						flex-wrap: wrap;

						.name_text {
							margin-left: 10rpx;
						}
					}
				}

				// 评论
				.comment {
					display: flex;
					align-items: flex-start;
					padding: 20rpx;
					background-color: #f8f9fa;

					.comment_text {
						margin-left: 10rpx;

						.comment_content {
							margin-left: 10rpx;
						}
					}
				}
			}
		}

	}
</style>
